<template>
    <div class="wrap">
        <div>
            当前计数值：<span class="count-number">{{ count }}</span>
        </div>
        <div>
            <button @click="plusOne">计数加1</button>
        </div>
    </div>    
</template>

<style lang="scss" scoped>
$main-color: darkblue;
.wrap {
    display: flex;
    .count-number {
        color: $main-color;
    }
}
</style>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['count-changed'])

const props = defineProps({
    initCount: Number,
    props2: String
})
const count = ref(props.initCount);

function plusOne() {
    count.value = count.value + 1;
    emit('count-changed', count.value);
}
</script>